<template>
    <div class="history">
        <div v-for="(chat, i) in history" :key="i" class="chat" :class="chat.role === 'user' ? 'user' : 'ai'">
            <chat-block :chat="chat"></chat-block>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import chatBlock from './ChatBlock.vue'
const props = defineProps({
    history: {
        type: Array,
        default: () => []
    }
})
const emits = defineEmits([])
</script>
<style lang="scss" scoped>
.history {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;

    div.chat {
        margin-bottom: 10px;
    }

    div.ai {
        text-align: left;
    }

    div.user {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
}
</style>